<template>
  <div class="login">
    <div class="login-wrap">
      <div class="login-title">谦恭造物后台管理系统</div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <div style="display: flex;align-items: center;">
            <el-input style="width: 50%;margin-right: 10px" v-model="ruleForm.code" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            <img :src="code" alt="" @click="changeCodeImg">
          </div>

        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%;"  type="primary" @click="submitForm('ruleForm')">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      code: '',
      key: '',
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      ruleForm: {
        username: '',
        password: '',
        code: ''
      }
    }
  },
  created() {
    this.changeCodeImg()
  },
  methods: {
    encode(_str){
      var staticchars = "PXhw7UT1B0a9kQDKZsjIASmOezxYG4CHo5Jyfg2b8FLpEvRr3WtVnlqMidu6cN";
      var encodechars = "";
      for(var i=0;i<_str.length;i++){
        var num0 = staticchars.indexOf(_str[i]);
        if(num0 == -1){
          var code = _str[i];
        }else{
          var code = staticchars[(num0+3)%62];
        }
        var num1 = parseInt(Math.random()*62,10);
        var num2 = parseInt(Math.random()*62,10);
        encodechars += staticchars[num1]+code+staticchars[num2];
      }
      return encodechars;
    },
     decode(_str){
      var staticchars = "PXhw7UT1B0a9kQDKZsjIASmOezxYG4CHo5Jyfg2b8FLpEvRr3WtVnlqMidu6cN";
      var decodechars = "";
      for(var i=1;i<_str.length;){
        var num0 = staticchars.indexOf(_str[i]);
        if(num0 == -1){
          var code = _str[i];
        }else{
          var code = staticchars[(num0+59)%62];
        }
        decodechars += code;
        i = i+3;
      }
      return decodechars;
    },
    changeCodeImg() {
      this.$http.get('/api/admin/captcha').then(r =>{
        console.log(r.data.data.url, '验证码图片')
        let data = r.data.data.url
        this.code = r.data.data.url
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let p = this.ruleForm.password
          console.log(this.encode(this.ruleForm.password), '生大赛')
          this.ruleForm.password = this.encode(this.ruleForm.password)
          this.$http.post('api/admin/login', this.ruleForm).then(r => {
            console.log(r, '快快')
            localStorage.token = r.data.data.token
            this.$router.push('/')
          }).catch(()=>{
            this.ruleForm.password = p
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },

  beforeRouteEnter: (to, from, next) => {
    next(vm => {
      if (localStorage.token) {
        vm.$router.push('/')
      }
    })
  }
}
</script>

<style scoped lang="less">
.login{
  height: 100vh;
  background: url("../assets/login.jpg") no-repeat;
}
  .login-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 400px;
    height: 290px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    .login-title{
      height: 90px;line-height: 90px;
      text-align: center;font-size: 18px;
    }
  }
</style>
